<template>
  <div class="form">
    <el-form
      :validate-on-rule-change="false"
      :model="addForm"
      :rules="rules"
      :inline="true"
      :size="option.formSize || 'small'"
      :ref="option.ref || 'ruleForm'"
      :label-width="option.labelWidth"
    >
      <div :class="[fromClass.isColumn ? 'column-form' : 'search-form']">
        <el-row>
          <!-- :xs="24"
            :sm="24"
            :lg="item.span > 12 ? item.span : 12" -->
          <!-- :xs="8" :sm="6" :md="4" :lg="3" :xl="1" -->
          <el-col>
            <el-form-item
              v-for="item in option.column"
              :label="item.label"
              :key="item.label"
              :prop="item.prop"
            >
              <slot :name="item.prop" v-bind:row="item">
                <component
                  :is="item.type"
                  v-bind="item"
                  :value.sync="addForm[item.prop]"
                  @resetItemValidate="resetItemValidate"
                ></component>
              </slot>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<script>
import CompFormItem from "@/components/formItem";

export default {
  name: "ComForm",
  components: {
    CompFormItem,
    ...CompFormItem.components,
  },
  props: {
    option: {
      type: Object,
      required: false,
      default: () => {},
    },
    form: {
      type: Object,
      required: true,
      default: () => {},
    },
    fromClass: {
      type: Object,
      required: false,
      default: () => {},
    },
  },
  watch: {
    form: {
      handler: function (val) {
        this.addForm = Object.assign(this.addForm, val);
      },
      deep: true,
    },
  },
  data() {
    return {
      addForm: {},
    };
  },
  computed: {
    /** 解析表单的正则验证***/
    rules() {
      let rules = this.option.column.reduce((map, i) => {
        if (i.rules) {
          if (!i.disabled) {
            map[i.prop] = i.rules;
          }
        }
        return map;
      }, {});
      return rules;
    },
  },
  created() {
    this.initForm(this.option);
  },
  methods: {
    initForm({ column }) {
      this.addForm = column.reduce((a, b) => {
        // 判断 form 是否赋值
        if (this.form[b.prop] != undefined) {
          a[b.prop] = this.form[b.prop];
        } else {
          // form 没有对应的值则查看是否设置 value 默认值
          if (b.value != undefined) {
            a[b.prop] = b.value;
          } else if (b.type == "Checkbox") {
            // 部分组件需要设置默认值为数组
            a[b.prop] = [];
          }
        }
        return a;
      }, {});
      console.log(this.addForm);
    },

    resetItemValidate(name) {
      this.$refs[this.option.ref || "ruleForm"].validateField(name);
    },
    // 提交通过回调返回 form
    submit(callback) {
      this.$refs[this.option.ref || "ruleForm"].validate((valid) => {
        if (valid) {
          callback && callback(this.addForm);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
